JavaScript 管道操作符：实现更简洁代码的函数式组合

            const number = 5;
const squared = square(number);
const incremented = increment(squared);
console.log(incremented); // Output: 26

function square(x) {
  return x * x;
}

function increment(x) {
  return x + 1;
}
            

              
                Copy
              
            
          

            const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);

const square = x => x * x;
const increment = x => x + 1;

const squareAndIncrement = compose(increment, square);

const number = 5;
const result = squareAndIncrement(number);
console.log(result); // Output: 26
            

              
                Copy
              
            
          

            function square(x) {
  return x * x;
}

function increment(x) {
  return x + 1;
}

const number = 5;
const result = number
  |> square
  |> increment;

console.log(result); // Output: 26
            

              
                Copy
              
            
          

            const products = [
  { name: 'Laptop', price: 1200, inStock: true },
  { name: 'Keyboard', price: 75, inStock: false },
  { name: 'Mouse', price: 25, inStock: true },
  { name: 'Monitor', price: 300, inStock: true },
];

const outOfStock = (product) => product.inStock === true;
const getName = (product) => product.name;

const processProducts = (products) => {
    const inStockProducts = products.filter(outOfStock);
    const productNames = inStockProducts.map(getName);
    const sortedNames = productNames.sort();
    const commaSeparated = sortedNames.join(', ');
    return commaSeparated;
};


const result = processProducts(products);
console.log(result); // Output: Laptop, Monitor, Mouse
            

              
                Copy
              
            
          

            const products = [
  { name: 'Laptop', price: 1200, inStock: true },
  { name: 'Keyboard', price: 75, inStock: false },
  { name: 'Mouse', price: 25, inStock: true },
  { name: 'Monitor', price: 300, inStock: true },
];

const filterInStock = (products) => products.filter(product => product.inStock);
const mapToName = (products) => products.map(product => product.name);
const sortAlphabetically = (names) => [...names].sort(); // Create a copy to avoid modifying the original array
const joinWithComma = (names) => names.join(', ');

const result = products
  |> filterInStock
  |> mapToName
  |> sortAlphabetically
  |> joinWithComma;

console.log(result); // Output: Laptop, Monitor, Mouse
            

              
                Copy
              
            
          

            async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return await response.json();
}

function extractData(data) {
  //Process the Json into something more manageable
  return data.results;
}

function processData(results) {
  //Further processing of the results
  return results.map(result => result.name);
}

function displayData(processedData) {
  //Diplay the processed Data.
  return processedData;
}

async function main() {
  try {
    const url = 'https://api.example.com/data'; // Replace with a real API endpoint

    const result = await (url
      |> fetchData
      |> extractData
      |> processData
      |> displayData);

    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

// main(); // Commenting this out as the url is a dummy value.

            

              
                Copy
              
            
          

            function trim(str) {
  return str.trim();
}

function toLower(str) {
  return str.toLowerCase();
}

function removeMultipleSpaces(str) {
  return str.replace(/\s+/g, ' ');
}

function capitalizeWords(str) {
  return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}

const inputString = '  Hello   World  ';

const result = inputString
  |> trim
  |> toLower
  |> removeMultipleSpaces
  |> capitalizeWords;

console.log(result); // Output: Hello World
            

              
                Copy
              
            
          

            npm install --save-dev @babel/plugin-proposal-pipeline-operator
            

              
                Copy
              
            
          

            {
  "plugins": [["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]]
}
            

              
                Copy